<template>
  <div id="footer" class="bg-white">
    <q-tabs class="col-xl-4 col-lg-4 col-md-6 text-grey-9 shadow-light" active-color="negative" align="justify">
      <q-route-tab class="title size-18 footitem" to="/" label="首页"/>
      <q-route-tab class="title size-18 footitem" to="/map/" label="发现"/>
      <q-route-tab class="title size-18 footitem" to="/topic/" label="专栏"/>
      <q-route-tab class="title size-18 footitem" to="/forum/" label="讨论"/>
      <q-route-tab class="title size-18 footitem" to="/account/nav/" label="我的" :count="unreadNotifyCount"/>
    </q-tabs>
  </div>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    name: 'LayoutFooter',
    data () {
      return {
        scrollDirection: {}
      }
    },
    computed: {
      ...mapState(['scrollStatus', 'unreadNotifyCount'])
    },
    watch: {
    },
    methods: {
    }
  }
</script>

<style lang="stylus">
  #footer
    .q-tab-label
      font-weight inherit!important
  .footitem
    .q-tab__label
      font-size 1em !important
</style>
